<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib uri="http://www.springframework.org/security/tags" prefix="security"%>
<!DOCTYPE html>
<html lang="zh-CN">
<%@include file="/WEB-INF/include-head.jsp"%>
<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
<link rel="stylesheet"href="ztree/zTreeStyle.css"/> 
<script type="text/javascript"src="ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="crowd/my-role.js"></script>
<script type="text/javascript">
	
	$(function(){
		
		// 1.为分页操作准备初始化数据
		window.pageNum = 1;
		window.pageSize = 5;
		window.keyword = "";
		
		// 2.调用执行分页的函数，显示分页效果
		generatePage();
		
		// 3.给查询按钮绑定单击响应函数
		$("#searchBtn").click(function(){
			
			// ①获取关键词数据赋值给对应的全局变量
			window.keyword = $("#keywordInput").val();
			
			// ②调用分页函数刷新页面
			generatePage();
			
		});
		
		// 使用jQuery对象的on()函数可以解决第一个页面有效，翻页后失效了问题
		// ①首先找到所有“动态生成”的元素所附着的“静态”元素
		// ②on()函数的第一个参数是事件类型
		// ③on()函数的第二个参数是找到真正要绑定事件的元素的选择器
		// ③on()函数的第三个参数是事件的响应函数
		//打开查看详情模态框
		$("#rolePageBody").on("click",".checkBtn",function(){
			$("#lookModal").modal("show");
			var roleName = $(this).parent().prev().text();
			$("#lookModal [name='roleName']").val(roleName);
		});
		
		//打开添加模态框
		$("#showAddModalBtn").click(function(){
			$("#addModal").modal("show");
			
		});
		
		//添加
		$("#saveRoleBtn").click(function(){
			var roleName = $("#addModal [name='roleName']").val();
			
			$.ajax({
				"url":"role/add.json",
				"data":{"name":roleName},
				"type":"post",
				"dataType":"json",
				"success":function(response){
					var result = response.result;
					if(result=="SUCCESS"){
						layer.msg("操作成功！");
						//添加后显示最后一页
						window.pageNum = 999999;
						generatePage();
					}
					if(result=="FAILED"){
						layer.msg("操作失败！"+response.message);
					}
				},
				"error":function(response){
					layer.msg(response.status+" "+response.statusText);
				}
			});
			//关闭模态框
			$("#addModal").modal("hide");
			//去除输入框内容
			$("#addModal [name=roleName]").val("");
		});
		
		//弹出编辑模态框
		$("#rolePageBody").on("click",".pencilBtn",function(){
			
			$("#editModal").modal("show");
			//获取全局id
			window.roleId= this.id;
			//获得原RolaName
			var roleName = $(this).parent().parent().prev().text();
			$("#editModal [name='roleName']").val(roleName);
		});
		
		//更新role
		$("#editRoleBtn").click(function(){
			var roleName = $("#editModal [name='roleName']").val();
			$.ajax({
				
				"url":"role/edit.json",
				"data":{
					"id":window.roleId,
					"name":roleName
				},
				"type":"post",
				"dataType":"json",
				"success":function(response){
					var result = response.result;
					if(result=="SUCCESS"){
						layer.msg("操作成功！");
						generatePage();
					}
					if(result=="FAILED"){
						layer.msg("操作失败！"+response.message);
					}
				},
				"error":function(response){
					layer.msg(response.status+" "+response.statusText);
				}
			});
			//关闭模态框
			$("#editModal").modal("hide");
		});
	
		//执行删除
		$("#delRoleBtn").click(function(){
			// 从全局变量范围获取roleIdArray，转换为JSON字符串
			var requestData = JSON.stringify(window.roleIdArray);
			
			$.ajax({
				"url":"role/remove/by/id/array.json",
				"data":requestData,
				"type":"post",
				"contentType":"application/json;charset=UTF-8",
				"dataType":"json",
				"success":function(response){
					var result = response.result;
					if(result=="SUCCESS"){
						layer.msg("操作成功！");
						generatePage();
					}
					if(result=="FAILED"){
						layer.msg("操作失败！"+response.message);
					}
				},
				"error":function(response){
					layer.msg(response.status+" "+response.statusText);
				}
				
			});

			// 关闭模态框
			$("#confirmModal").modal("hide");
			//将全选框置为未选择状态
			$("#summaryBox").prop("checked",false);
			
		});
		
		//单条删除数据
		$("#rolePageBody").on("click",".removeBtn",function(){
			var roleId = this.id;
			var roleName = $(this).parent().parent().prev().text();
			
			var roleArray=[{
				"roleId":roleId,
				"roleName":roleName
			}];
			showConfirmModal(roleArray);
		});
		
		//给全选绑定单击事件
		$("#summaryBox").click(function(){
			// ①获取当前多选框自身的状态
			var currentStatus = this.checked;
			
			// ②用当前多选框的状态设置其他多选框
			$(".itemBox").prop("checked", currentStatus);
			
		});
		
		//判断全选/全不选
		$("#rolePageBody").on("click",".itemBox",function(){
			var checkedBoxCount = $(".itemBox:checked").length;
			var totalCount = $(".itemBox").length;
			$("#summaryBox").prop("checked",checkedBoxCount==totalCount);
		});
		
		//批量删除数据
		$("#batchRemoveBtn").click(function(){
			var roleArray = [];
			$(".itemBox:checked").each(function(){
				var roleId = this.id;
				var roleName = $(this).parent().next().text();
				roleArray.push({
					"roleId":roleId,
					"roleName":roleName
				});
			});
			//未选择给出提示
			if($(".itemBox:checked").length==0){
				layer.msg("请选择至少一条数据进行删除！");
			}
			//显示删除数据
			showConfirmModal(roleArray);
		});
		
		//分配权限
		$("#rolePageBody").on("click",".check2Btn",function(){
			
			//打开模态框
			$("#assignModal").modal("show");
			//把roleId变成全局变量
			window.roleId = this.id;
			//显示权限数
			fillAuthTree();
		});
		
	});
	
	
		
</script>
<body>

	<%@ include file="/WEB-INF/include-nav.jsp"%>
	<div class="container-fluid">
		<div class="row">
			<%@ include file="/WEB-INF/include-sidebar.jsp"%>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">
							<i class="glyphicon glyphicon-th"></i> 数据列表
						</h3>
					</div>
					<div class="panel-body">
						<form class="form-inline" role="form" style="float: left;">
							<div class="form-group has-feedback">
								<div class="input-group">
									<div class="input-group-addon">查询条件</div>
									<input id="keywordInput" class="form-control has-success" type="text"
										placeholder="请输入查询条件">
								</div>
							</div>
							<button id="searchBtn" type="button" class="btn btn-warning">
								<i class="glyphicon glyphicon-search"></i> 查询
							</button>
						</form>
						<security:authorize access="hasRole('角色经理')">
							<button id="batchRemoveBtn" type="button" class="btn btn-danger"
								style="float: right; margin-left: 10px;">
								<i class=" glyphicon glyphicon-remove"></i> 删除
							</button>
							<button 
								type="button" 
								id="showAddModalBtn" class="btn btn-primary"
								style="float: right;">
								<i class="glyphicon glyphicon-plus"></i> 新增
							</button>
						</security:authorize>
						<br>
						<hr style="clear: both;">
						<div class="table-responsive">
							<table class="table  table-bordered">
								<thead>
									<tr>
										<th width="30">#</th>
										<th width="30"><input id="summaryBox" type="checkbox"></th>
										<th >名称</th>
										<th width="250">操作</th>
									</tr>
								</thead>
								<tbody id="rolePageBody"></tbody>
								<tfoot>
									<tr>
										<td colspan="6" align="center">
											<div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
										</td>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
<%@ include file="/WEB-INF/modal-role-look.jsp"%>
<%@ include file="/WEB-INF/modal-role-add.jsp"%>
<%@ include file="/WEB-INF/modal-role-edit.jsp"%>
<%@ include file="/WEB-INF/modal-role-confirm.jsp"%>
<%@ include file="/WEB-INF/modal-role-assign-auth.jsp"%>
</body>
</html>